<template>
  <div class="menu">
    <el-row>
      <!-- 菜单折叠 -->
      <el-col :span="7" :xs="2" :sm="2" :lg="7">
        <el-menu mode="horizontal" :router="false" text-color="#5a5e66">
          <el-menu-item @click="menuFold()" v-show="config.isVertical">
            <i v-show="!config.isCollapse" class="el-icon-s-fold"></i>
            <i v-show="config.isCollapse" class="el-icon-s-unfold"></i>
          </el-menu-item>
          <!-- 面包屑 -->
          <el-menu-item style="padding: 0 15px;" v-show="config.isXs">
            <breadcrumb></breadcrumb>
          </el-menu-item>
        </el-menu>
      </el-col>
      <!-- 菜单区 -->
      <transition name="el-zoom-in-center">
        <el-col :span="10" v-show="!config.isVertical">
          <el-menu
              :default-active="active"
              mode="horizontal"
              :router="true"
              text-color="#5a5e66"
              style="margin: 0 auto; width: max-content;"
          >
            <!-- 导航菜单树组件，动态加载菜单 -->
            <!-- 横排小于8个 -->
            <label v-for="(item,index) in menuTree" :key="item.id">
              <menutree v-if="index<menuNum" :menu="item"></menutree>
            </label>
            <!-- 横排大于8个 -->
            <el-submenu v-if="menuTree.length >= menuNum" index="9-999">
              <template slot="title">
                <i :class="['el-icon-more','asideIcon']"></i>
                <span slot="title">更多菜单</span>
              </template>
              <label v-for="(item,index) in menuTree" :key="item.id">
                <menutree v-if="index>=menuNum" :menu="item"></menutree>
              </label>
            </el-submenu>
          </el-menu>
        </el-col>
      </transition>
      <!-- 功能按钮区 -->
      <el-col
          :span="7"
          :xs="22"
          :sm="22"
          :lg="7"
          style="min-width: 230px;"
          class="_right_menu"
          active-text-color="#ffffff"
          text-color="#ffffff"
      >
        <el-menu mode="horizontal" default-active="-1">
          <!-- 设置及个人中心 -->
          <el-menu-item class="_right_menu" style="padding: 0;" index="tool-0">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <div style="padding: 0;">
                  <i class="el-icon-user-solid"></i>
                  <span>{{ name }}</span>
                  <i
                      class="el-icon-arrow-down el-icon--right"
                      style="font-size: 12px;margin: 5px 0px 0px 0px;"
                  ></i>
                </div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
          <!-- 菜单切换 -->
          <el-menu-item
              index="tool-4"
              class="_right_menu"
              title="菜单切换"
              @click="menuVertical()"
              v-show="config.isXs"
          >
            <span class="el-icon-menu"></span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import menutree from "./menutree.vue";
import breadcrumb from "./breadcrumb.vue";
import utils from "../assets/js/utils";

export default {
  components: {menutree, breadcrumb},
  data: function () {
    return {
      active: "/home",
      menuNum: 4,
      menuTree: [],
      name: sessionStorage.getItem(utils.constPool.NICKNAME),
    };
  },
  watch: {
    $route: function (to, from) {
      if (to && to.fullPath) {
        this.active = to.fullPath;
      }
    },
  },
  created: function () {
    // 如果没登录，退出到login页
    if (sessionStorage.getItem(utils.constPool.TOKEN)) {
      this.$router.replace("home");
    } else {
      this.open("login");
    }
    if (this.getCookie("COOKIE_THEME")) {
      this.$store.state.theme = this.getCookie("COOKIE_THEME");
    }
    document.getElementsByTagName("body")[0].className =
        "theme-" + this.$store.state.theme;
  },

  computed: {
    config: function () {
      return this.$store.state.config;
    },
    currentUser: function () {
      return this.$store.state.currentUser;
    },
  },
  methods: {
    open: function (path) {
      this.$router.push(path);
    },
    logout: function () {
      sessionStorage.removeItem(utils.constPool.TOKEN);
      this.open("login");
    },
    menuFold() {
      this.$store.state.config.isCollapse = !this.config.isCollapse;
    },
    menuVertical() {
      this.$store.state.config.isVertical = !this.config.isVertical;
    },
    setTheme: function (val) {
      this.setCookie("COOKIE_THEME", val);
      this.$store.state.theme = this.getCookie("COOKIE_THEME");
      this.theme = val;
      document.getElementsByTagName("body")[0].className = "theme-" + val;
    },
    getCookie: function (name) {
      try {
        return document.cookie.match(
            new RegExp("(^| )" + name + "=([^;]*)(;|$)")
        )[2];
      } catch (e) {
        return "";
      }
    },
    setCookie: function (name, value) {
      if (value == null) {
        value = "";
      }

      let expiredays = 365;
      let exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);

      let cookie =
          name +
          "=" +
          escape(value) +
          "; path=/; expires=" +
          exdate.toGMTString();
      document.cookie = cookie;
    },
  },
};
</script>
<style scoped>
._right_menu {
  float: right;
  padding: 0 12px;
}

.menu .el-menu-item [class^="el-icon-"] {
  margin-right: 0px;
}

.asideFold .el-menu-item:focus,
.el-menu-item:hover {
  background-color: transparent;
}

._left_menu .el-menu-item:active {
  background-color: transparent;
}

.el-menu-item >>> i,
.el-submenu__title i {
  color: inherit;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
<style>
/* 顶部菜单栏样式————开始 */
.menu .el-tabs__item {
  height: 30px;
  line-height: 30px;
}

.menu .el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
}

.menu .el-menu-item {
  height: 50px;
  line-height: 50px;
}

.menu .el-menu--horizontal > label {
  float: left;
  margin: 0;
}

.el-submenu__icon-arrow {
  margin-top: -5px;
}

.menu .el-menu--horizontal > label > .el-submenu .el-submenu__icon-arrow {
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -3px;
}

.menu {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.menu .el-submenu__icon-arrow {
  right: 5px;
}

/* .menu .el-menu-item:focus,
.menu .el-menu-item:hover {
  color: #409eff;
}
.menu .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.menu .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: #409eff !important;
} */

.menu .el-menu.el-menu--horizontal {
  border-bottom: 0px;
}

/* 顶部菜单栏样式————结束 */
</style>